<template>
  <a-dropdown :trigger="['click']" v-model="show">
    <div slot="overlay">
      <a-spin :spinning="loading">
        <a-tabs
          class="dropdown-tabs"
          :tabBarStyle="{ textAlign: 'center' }"
          :style="{ width: '500px' }"
        >
          <a-tab-pane tab="告警" key="1">
            <a-table
              :data-source="activeAlarm"
              :rowKey="(record,index)=>index"
              size="small"
              :columns="columns"
            ></a-table>
          </a-tab-pane>
          <a-tab-pane tab="事件" key="2">
            <a-list class="tab-pane"></a-list>
          </a-tab-pane>
          <a-tab-pane tab="待办" key="3">
            <a-list class="tab-pane"></a-list>
          </a-tab-pane>
        </a-tabs>
      </a-spin>
    </div>
    <span @click="fetchNotice" class="header-notice">
      <a-badge class="notice-badge" :count="alarmCount">
        <a-icon :class="['header-notice-icon']" type="bell" />
      </a-badge>
    </span>
  </a-dropdown>
</template>

<script>
export default {
  name: "HeaderNotice",
  data() {
    return {
      loading: false,
      show: false,
      columns: [
        {
          title: "设备",
          dataIndex: "thing_name",
        },
        {
          title: "站点",
          dataIndex: "station_name",
        },
        {
          title: "告警",
          dataIndex: "alarm_name",
        },
       
        {
          title: "索引",
          dataIndex: "mindex",
        },
        {
          title: "级别",
          dataIndex: "level",
        },
        {
          title: "时间",
          dataIndex: "alarm_time",
        },
      ],
    };
  },
  computed: {
    activeAlarm() {
      return this.$store.state.activeAlarm.activeAlarms;
    },
    alarmCount(){
      const alarms = this.$store.state.activeAlarm.activeAlarms
      if(alarms){
        return alarms.length
      }
      return 0
    }
  },
  beforeCreate() {
    // you should check in this action that items already loaded earlier as well
  },
  mounted() {
    console.log("hello------------------------------222");
    this.$store.dispatch("activeAlarm/refreshActiveAlarm");
  },
  methods: {
    fetchNotice() {
      if (this.loading) {
        this.loading = false;
        return;
      }
      this.loadding = true;
      setTimeout(() => {
        this.loadding = false;
      }, 1000);
    },
  },
};
</script>

<style lang="less">
.header-notice {
  display: inline-block;
  transition: all 0.3s;
  span {
    vertical-align: initial;
  }
  .notice-badge {
    color: inherit;
    .header-notice-icon {
      font-size: 16px;
      padding: 4px;
    }
  }
}
.dropdown-tabs {
  background-color: @base-bg-color;
  box-shadow: 0 2px 8px @shadow-color;
  border-radius: 4px;
  .tab-pane {
    padding: 0 24px 12px;
    min-height: 250px;
  }
}
</style>